<template>
  <ul class="atlas-layout-column">
    <li class="fav-d-item create-btn" @click="handleClick" v-if="(foldertype || foldertype === 0) && myself">
      <a>
        <span class="plus-icon"></span>
        <span class="text">创建{{ folderTypeEnum[foldertype] }}</span>
      </a>
    </li>
    <li class="fav-d-item" :class="{'no-data':!f.id}" v-for="(f, i) in list" :key="i" @click="toFoldInfo(f)">
      <template v-if="f.id">
        <div class="img-flex-box">
          <div class="lt-img">
            <img loading="lazy" v-if="f.collectList && f.collectList.length > 0" alt="" :srcset="f.collectList[0].srcsets" v-lazy="f.collectList[0].lazy"  @error="loadError"/>
          </div>
          <div class="rt-img">
            <div class="next-img">
              <img loading="lazy" v-if="f.collectList && f.collectList.length > 1" alt="" :srcset="f.collectList[1].srcsets" v-lazy="f.collectList[1].lazy"  @error="loadError"/>
            </div>
            <div class="last-img">
              <img loading="lazy" v-if="f.collectList && f.collectList.length > 2" alt="" :srcset="f.collectList[2].srcsets" v-lazy="f.collectList[2].lazy"  @error="loadError"/>
            </div>
          </div>
          <div class="ops" v-if="myself">
            <a class="i-del" title="删除s" @click.stop="id = f.id; showDelConfirm = true;"></a>
            <a class="i-edit" title="编辑" @click.stop="handleEdit(f)" target="_blank"></a>
          </div>
        </div>
        <div class="bot-desc">
          <span class="file-name" :title="f.title">{{ f.title }}</span>
          <span class="file-num">{{ f.num }} 收藏</span>
        </div>
        <div class="f-type-row">
          <span class="f-type" :class="['ftp_'+f.type]">{{ folderTypeEnum[f.type] }}</span>
        </div>
      </template>
    </li>
    <div class="web-data-error" v-if="isDataError">
        <div class="tip-text">别走开刷新一下，有所爱才有所期待～</div>
        <div class="options">
            <a class="go-back" href="/">返回首页</a>
            <a class="click-refresh" @click="isDataError=false;handleSearch();">点击刷新</a>
        </div>
    </div>

    <Empty  text="空空如也~" v-if="list.length==0&&!isloading&&!isDataError"/>
    <div class="no-more-text" v-if="!hasMore&&!isloading&&list.length>0">没有更多了</div>

    <a-modal v-model="showCreate" destroyOnClose centered :footer="null"  :closable="false">
      <CreateFolder @close="onClose" :info="record" :foldertype="foldertype" />
    </a-modal>

    <a-modal v-model="showDelConfirm" destroyOnClose centered :footer="null"  :closable="false" width="366px">
      <div class="fav-component" style="width:366px;">
        <div class="fav-header">
          系统提示
        </div>
        <div class="folder-con" style="margin-top:30px;text-align:center;font-size:14px;">
          确定删除吗？删除后当前内容都会被删除且不可恢复。
        </div>
        <div class="btns m-widbtns">
          <a class="pro-default-btn" @click="handleConfirmDel">确认</a>
          <a class="pro-confirm-btn" @click="showDelConfirm = false">取消</a>
        </div>
      </div>
    </a-modal>
  </ul>
</template>

<script>
import Empty from '@/components/Empty'
import CreateFolder from '@/components/CreateFolder'
import api from '@/api/api'
export default {
  components: { CreateFolder,Empty },
  data() {
    return {
      isDataError:false,
      isloading:true,
      record: null,
      showDelConfirm: false,
      folderTypeEnum: {
        1: '图片集收藏夹',
        0: '单图收藏夹',
        2: '短视频收藏夹'
      },
      nextPageEnum: {
        '': '/',
        1: '/collection/games',
        0: '/collection/imgs',
        2: '/collection/videos'
      },
      showCreate: false,
      hasMore: true,
      list: [],
      params: {
        pageNum: 1,
        pageSize: 20,
        orderByColumn: 'createTime',
        isAsc: 'desc'
      }
    }
  },
  props: ['foldertype', 'myself'],
  methods: {
    loadError(e){
        e.target.removeAttribute('srcset');
    },
    onLoaded(e,item,w,isimg){
        let domainUrl=this.$imgdomainurl;
        let el=e.target;
        let _vtime=null;
        if(item.updateTime){
            _vtime=item.updateTime;
        }else if(item.createTime){
            _vtime=item.createTime;
        }else if(item.create_time){
            _vtime=item.create_time.replace('T',' ');
        }
        _vtime=Math.abs(new Date(_vtime).getTime());
        let srcsets=[];
        
        if(isimg){
            let _url=this.$imgdomainurl+(item.imageId?item.imageId:(item.article?'article-'+item.article.id:''))+'-'+_vtime;
            if(!item.imageId&&!item.article)
              _url=item.content;
            else{
              srcsets.push(_url+'@1x'+w+'.webp 1x');
              srcsets.push(_url+'@2x'+w+'.webp 2x');
              srcsets.push(_url+'@3x'+w+'.webp 3x');
            
              el.srcset=srcsets.join(',')
            }
        }else{
            srcsets.push(domainUrl+item.id+'-'+_vtime+'@1x'+w+'.webp 1x');
            srcsets.push(domainUrl+item.id+'-'+_vtime+'@2x'+w+'.webp 2x');
            srcsets.push(domainUrl+item.id+'-'+_vtime+'@3x'+w+'.webp 3x');
            el.srcset=srcsets.join(',')
        }
    },
    getimgObj(item,w,isimg){
      let _vtime=null;
      if(item.updateTime){
        _vtime=item.updateTime;
      }else if(item.createTime){
        _vtime=item.createTime;
      }else if(item.create_time){
        _vtime=item.create_time.replace('T',' ');
      }
      _vtime=Math.abs(new Date(_vtime).getTime());
      if(isimg){
        if(!item){
            return{
                src:require('@/assets/loading_error.png'),
                error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
            }
        }else{
            let _url=this.$imgdomainurl+(item.imageId?item.imageId:(item.article?'article-'+item.article.id:''))+'-'+_vtime+'@1x'+w+'.webp';
            if(!item.imageId&&!item.article)
              _url=item.content;
            return{
                src:_url,
                error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
            }
        }
      }else{
        return{
            src:this.$imgdomainurl+item.id+'-'+_vtime+'@1x'+w+'.webp',
            error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
            loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
        }
      }
    },
    handleSearch(){
      this.hasMore=true;
      this.list=[];
      this.isDataError=false;
      this.params.pageNum=1;
      this.queryList();
    },
    handleEdit(f){
      this.$emit('inedit',f)
    },
    handleClick(){
      this.$emit('show')
    },
    toFoldInfo(f) {
      if(!f.id)return;
      localStorage.setItem('FOL-BACK-P',this.$router.currentRoute.fullPath);
      this.$router.push({path:this.nextPageEnum[f.type] + '/' + f.id})
      // let routeData = this.$router.resolve({ path: this.nextPageEnum[f.type] + '/' + f.id });

      // window.open(routeData.href, '_blank');
    },
    async handleConfirmDel() {
      let res = await api.removeSinglePicFav(this.id);
      if (res.code == 0) {
        this.list=[];
        this.hasMore=true;
        this.$amessage.success('删除成功')
        this.queryList();
        this.showDelConfirm=false;
      }
    },
    onClose(isRefresh) {
      this.showCreate=false;
      if(isRefresh){
        this.list=[];
        this.hasMore=true;
        this.params.pageNum=1;
        this.queryList();
      }
    },
    loadNext() {
      this.params.pageNum++;
      this.queryList();
    },
    async queryList() {
      let res = {};
      let domainUrl = this.$imgdomainurl;
      
      this.isloading=true;
      let data = Object.assign({}, this.params);
      if (this.foldertype === '' && this.foldertype !== 0) {
        delete data.type;
      } else {
        data.type = this.foldertype;
      }
      // const loading = this.$loading({
      //   lock: true,
      //   text: '努力加载中...',
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(0, 0, 0, 0.7)'
      // });
      let that = this;
      if(data.pageNum==1){
        this.list=[{},{},{},{},{},{},{},{},{}]
      }
      api.explorerList(data).then(res=>{
        if(data.pageNum==1){
          that.list=[]
        }
        that.isloading=false;
        // loading.close();
        let totalPage = res.total % that.params.pageSize == 0 ? res.total / that.params.pageSize : parseInt(res.total / that.params.pageSize) + 1
        if (res.data && (res.data.length < that.params.pageSize || that.params.pageNum >= totalPage)) {
          that.hasMore = false
        } else {
          that.hasMore = true
        }

        res.data.map(item=>{
          if(item.collectList)
          {
            item.collectList.map(f=>{
              let _vtime = null;
              if (f.updateTime) {
                  _vtime = f.updateTime;
              } else if (f.createTime) {
                  _vtime = f.createTime;
              } else if (f.create_time) {
                  _vtime = f.create_time.replace('T', ' ');
              }
              _vtime = Math.abs(new Date(_vtime).getTime());
              let srcsets = [];
              let pref=item.type==1?'article-'+f.article.id:f.imageId;
              srcsets.push(domainUrl +pref + '-' + _vtime + '@1x432.webp 1x');
              srcsets.push(domainUrl +pref + '-' + _vtime + '@2x432.webp 2x');
              srcsets.push(domainUrl +pref + '-' + _vtime + '@3x432.webp 3x');
              f.srcsets = srcsets.join(',')
              f.lazy = {
                  src: domainUrl +pref + '-' + _vtime + '@1x432.webp',
                  error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                  loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
              }
            })
          }
        })

        this.list=[...this.list,...res.data];
      }).catch(res=>{
        that.list=[];
        that.isloading=false;
        // loading.close();
        that.isDataError=true;
      })
    }
  },
  watch: {
    foldertype() {
      this.list=[];
      this.params.pageNum = 1;
      this.isDataError=false;
      this.queryList();
    }
  },
  mounted() {
    if (!this.myself) {
      this.params.currentUserId = this.$route.params.id;
    }
    this.queryList();
  }
}
</script>

<style scoped lang="less">
.atlas-layout-column {
  display: flex;
  flex-wrap: wrap;
  grid-gap:20px;
  .fav-d-item {
    // width: 312px;
    width:calc((100% - 80px) / 5);
    height: 280px;
    // margin-right: 20px;
    // margin-bottom: 20px;
    color: #fff;
    // border-bottom-left-radius: 16px;
    // border-bottom-right-radius: 16px;
    border-radius:16px;
    //   border-radius: 16px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    background: #171717;
    border:2px solid transparent;
    transition:.1s border linear;
    
    &:hover {
      border-color:#11CCB1;
      border-radius: 16px;

      .img-flex-box {

        .ops {
          display: flex;
        }
      }
    }

    &:nth-child(5n) {
      // margin-right: 0px;
    }

    &.create-btn {
      border: 2px dashed #424242;
      border-radius: 16px;
      transition: 0.1s all linear;

      a {
        // display: inline-block;
        width: 100%;
        height: 100%;
        // text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .plus-icon {
          width: 40px;
          height: 40px;
          border-radius: 40px;
          background-color: #29272f;
          display: block;
          text-align: center;
          line-height: 40px;
          margin-bottom:12px;
          // margin: 115px auto 18px auto;
          background-image: url('../../../assets/pro/list_create_plusico.svg');
          background-repeat: no-repeat;
          background-size: 40px 40px;
        }

        .text {
          font-size: 14px;
          color: #fff;
          font-weight: 500;
        }
      }

      &:hover {
        border-color: #fff;
      }
    }

    .img-flex-box {
      display: flex;
      align-items: center;
      position: relative;
      background: #171717;
      border-top-left-radius: 16px;
      border-top-right-radius: 16px;

      .ops {
        position: absolute;
        top: 10px;
        right: 10px;
        transition: .2s all linear;

        a {
          border-radius: 12px;
          background: #FFFFFF;
          width: 40px;
          height: 40px;
          transition: .2s all linear;

          &:hover {
            // opacity:.9;
            background-color: #e1e1e1;
          }
        }

        .i-del {
          background-image: url('../../../assets/pro/i_del.png');
          background-size: 22px 22px;
          background-repeat: no-repeat;
          background-position: center;
          margin-right: 10px;
        }

        .i-edit {
          background-image: url('../../../assets/pro/i_edit.png');
          background-size: 22px 22px;
          background-repeat: no-repeat;
          background-position: center;
        }
      }

      .lt-img {
        min-width: 204px;
        height: 210px;
        margin-right: 6px;
        border-radius: 16px;
        overflow: hidden;
        background: #242327;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .rt-img {
        width:100%;
        .next-img {
          // width: 102px;
          height: 102px;
          margin-bottom: 6px;
          border-radius: 16px;
          overflow: hidden;

          background: #242327;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .last-img {
          // width: 102px;
          height: 102px;
          border-radius: 16px;
          overflow: hidden;

          background: #242327;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }

      .author {
        position: absolute;
        bottom: 10px;
        left: 9px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 12px;
        padding: 10px 13px;
        transition: 0.1s all linear;
        width: 164px;
        cursor: pointer;

        &:hover {
          background: rgba(255, 255, 255, 1);
        }

        .ar-tit {
          font-size: 14px;
          font-weight: 500;
          color: #383737;
          line-height: 20px;
          margin-bottom: 5px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          background: url('../../../assets/pro/take_tit_icon.svg') no-repeat;
          background-position: left center;
          padding-left: 22px;
        }

        .u-box {
          display: flex;
          padding-left: 20px;

          .name {
            font-size: 14px;
            color: #969696;
            font-weight: 500;
          }

          .avatar {
            width: 20px;
            height: 20px;
            border-radius: 20px;
            margin-right: 7px;
          }
        }
      }

      .at-btn {
        color: #fff;
        font-size: 14px;
        background-color: #11CCB1;
        border-radius: 12px;
        line-height: 44px;
        background-image: url('../../../assets/pro/un_follow_ico.svg');
        background-repeat: no-repeat;
        background-position: 11px center;
        // width:82px;
        padding-left: 35px;
        padding-right: 19px;
        text-align: center;
        position: absolute;
        left: 10px;
        top: 10px;
      }

      .ated-btn {
        color: #383737;
        font-size: 14px;
        background-color: #fff;
        border-radius: 12px;
        line-height: 44px;
        background-image: url('../../../assets/pro/cancel_follow_ico.svg');
        background-repeat: no-repeat;
        background-position: 11px center;
        // width:82px;
        padding-left: 35px;
        padding-right: 19px;
        text-align: center;
        position: absolute;
        left: 10px;
        top: 10px;
      }

      .edit-btn {
        color: #383737;
        font-size: 14px;
        background-color: #fff;
        border-radius: 12px;
        line-height: 44px;
        width: 40px;
        height: 40px;
        text-align: center;
        position: absolute;
        right: 10px;
        top: 10px;
        background-image: url('../../../assets/pro/edit_ico.svg');
        background-repeat: no-repeat;
        background-position: center center;
      }

      .hid-el {
        // display: none;
        transition: 0.1s all linear;
        opacity: 0;
      }

      &:hover {
        .hid-el {
          // display: inline-block;
          opacity: 1;
        }
      }
    }

    .bot-desc {
      font-size: 16px;
      display: flex;
      justify-content: space-between;
      // margin-top: 14px;
      // padding-top:14px;
      line-height: 22px;
      height: 22px;
      margin-top: 10px;
      // border-bottom-left-radius:16px;
      // border-bottom-right-radius:16px;
      align-items: center;

      // background: #171717;
      .file-name {
        color: #fff;
        font-weight: 500;
        padding-left: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .file-num {
        color: #969696;
        margin-right: 13px;
        font-size: 14px;
      }
    }
    .followed-btn {
      background: #29272F;
      color: #fff;
      width: 100%;
      line-height: 46px;
      border-radius: 8px;
      text-align: center;
      display: inline-block;
      font-size: 16px;
      margin-top: 10px;
    }

    .follow-to {
      background: #11CCB1;
      color: #fff;
      width: 100%;
      line-height: 46px;
      border-radius: 8px;
      text-align: center;
      display: inline-block;
      font-size: 16px;
      margin-top: 10px;
    }
  }
}
</style>